<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../css/购物车.css">
</head>

<body>
	<div class="logo">
		<img src="../img/logo.png" alt="">
	</div>	
	<!-- <h2>购物车</h2> -->
	<div class="carWarp">
		<div class="name">
			<input type="text" id="ipt2" value="商品图片">
			<input type="text" id="ipt1" value="商品名称">
			<input type="text" id="ipt1" value="商品价格">
			<input type="text" id="ipt1" value="商品数量">
		</div>
		<br />
		全选：<input class="all-sel" type="checkbox" name="" id="" value="" />
		<ul class="list">

			<!-- <li>
				<input type="checkbox" name="" id="check" value="" />
				<img src="" >
				<h3></h3>
				<p></p>
				<input type="button" name="" id="" value='-' />
				<input type="text" name="" id="" value="" />
				<input type="button" name="" id="" value="+" />
			</li> -->
		</ul>
		<div class="countWarp">
			<div class="count">
				
				<p>
					<em>已选择<i></i>件商品</em>
				</p>
				<div class="count-m">
					<em>总价:</em><time>￥</time><strong id="count-price"></strong>
				</div>
			</div>
		</div>

	</div>
	<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//uid

		let uid = localStorage.getItem('id')
		console.log(uid)

		//购物车列表
		let list = document.querySelector('.list')
		let CartListAPI = `http://jx.xuzhixiang.top/ap/api/cart-list.php`
		axios.get(CartListAPI, {
			params: {
				id: uid
			}
		}).then(res => {
			console.log(res.data)
			let pList = res.data.data;
			let html = ''
			for (let i = 0; i < res.data.data.length; i++) {
				let pObj = res.data.data[i];

				pObj.isSelected = false; //
				// 购物车中所有的商品对象 数组

				html +=
					`
					 <li>
						

					 	<input class="single-sel" type="checkbox" name="" id="inp1" value="" data-id='${pObj.pid}'/>
						 <img src="${pObj.pimg}" > 
						<h3>${pObj.pname}</h3>
					 	<p>${pObj.pprice}</p>
					 	<input class="sub-btn" type="button" name="" id="inp2" value='-' data-id="${pObj.pid}"/>
					 	<input type="text" name="" id="inp3" value="${pObj.pnum}" />
					 	<input class="add-btn" type="button" name="" id="inp4" value="+" data-id="${pObj.pid}"/>
						<input class="delete-btn" type="button" name="" id="inp5" value="删除" data-id="${pObj.pid}">
					 </li>
					 `
			}
			list.innerHTML = html
			// 修改  删除
			let deleteBtns = document.querySelectorAll('.delete-btn');
			let subBtns = document.querySelectorAll('.sub-btn');
			let addBtns = document.querySelectorAll('.add-btn');
			for (let i = 0; i < deleteBtns.length; i++) {
				deleteBtns[i].onclick = function () {
					console.log(this)
					let pid = this.getAttribute('data-id')
					let CartDeleteAPI = `http://jx.xuzhixiang.top/ap/api/cart-delete.php`
					axios.get(CartDeleteAPI, {
						params: {
							pid,
							uid
						}
					}).then(res => {
						console.log(res.data)
						this.parentNode.remove()
					})
				}
				// 加

				addBtns[i].onclick = function () {
					// 按钮上pid
					let pid = this.getAttribute('data-id')
					// 找到数组中商品，让他的数量++
					let pObj = pList.find(v => v.pid == pid)
					pObj.pnum++
					console.log(pList)
					this.previousElementSibling.value = pObj.pnum
					let CartUpdateAPI = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`
					axios.get(CartUpdateAPI, {
						params: {
							pid,
							uid,
							pnum: pObj.pnum
						}
					}).then(res => {
						console.log(res.data)
					})
				}

				// 减

				subBtns[i].onclick = function () {
					// 按钮上pid
					let pid = this.getAttribute('data-id')
					// 找到数组中商品，让他的数量++
					let pObj = pList.find(v => v.pid == pid)
					// 商品数量最少是1
					if (pObj.pnum == 1) {

						return;
					}

					pObj.pnum--
					console.log(pList)
					this.nextElementSibling.value = pObj.pnum
					let CartUpdateAPI = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`
					axios.get(CartUpdateAPI, {
						params: {
							pid,
							uid,
							pnum: pObj.pnum
						}
					}).then(res => {
						console.log(res.data)
					})
				}



			}
			// 单选和全选
			let allSelBtn = document.querySelector('.all-sel')
			let singleSelBtns = document.querySelectorAll('.single-sel')
			// 全选按钮加事件
			allSelBtn.onchange = function () {
				console.log(this.checked)
				for (let i = 0; i < singleSelBtns.length; i++) {
					singleSelBtns[i].checked = this.checked;

				}

			}
			// 单选按钮加事件
			for (let i = 0; i < singleSelBtns.length; i++) {
				singleSelBtns[i].onchange = function () {
					// 判断所有的单选按钮状态
					// 是否都被选中

					// 对应的数据发生变化
					let pid = this.getAttribute('data-id')
					pObj = pList.find(v => v.pid == pid)
					pObj.isSelected = this.checked//isSelected  自定义名字
					let singleSelBtnsArr = [...singleSelBtns]//...转数组
					console.log(singleSelBtnsArr);

					let allSelected = singleSelBtnsArr.every(v => v.checked == true)


					console.log(allSelected);

					allSelBtn.checked = allSelected

					countPrice(pList)

				}

			}

		})

		// 计算总价
		let cp=document.querySelector('#count-price')
		function countPrice(pList) {
			// 根据刚才的数组 pList
			console.log(pList)

			let count = 0;
			for (let i = 0; i < pList.length; i++) {
				let pObj = pList[i];
				console.log(pObj)
				if (pObj.isSelected == true) {
					count += pObj.pnum * pObj.pprice
				}
			}
			console.log(count)

		}
		cp.innerHTML=count

	</script>
</body>

</html>